/**
 * LogoutDialog component
 * @module components/root/LogoutDialog
 */

import React, { useCallback } from "react";
import { Dialog, DialogActions, DialogTitle, Button } from "@mui/material";

/**
 * LogoutDialog component
 * @function LogoutDialog
 * @static
 * @returns {component} LogoutDialog
 */

export default function LogoutDialog({
  openLogoutDialog,
  setOpenLogoutDialog,
  handleConfirmLogout,
}) {
  //点击背景或者Esc关闭对话框
  const closeLogoutDialog = useCallback((e, reason) => {
    if (reason === "escapeKeyDown" || reason === "backdropClick") {
      setOpenLogoutDialog(false);
    }
  }, []);
  return (
    <Dialog open={openLogoutDialog} onClose={closeLogoutDialog}>
      <DialogTitle
        align="center"
        sx={{
          width: "200px",
        }}
      >
        确认要退出吗？
      </DialogTitle>
      <DialogActions
        sx={{
          display: "flex",
          flexFlow: "row nowrap",
          justifyContent: "space-around",
          height: 60,
        }}
      >
        <Button
          onClick={() => {
            setOpenLogoutDialog(false);
          }}
        >
          取消
        </Button>
        <Button onClick={handleConfirmLogout} autoFocus>
          确认
        </Button>
      </DialogActions>
    </Dialog>
  );
}
